<template>
  <div class="about">
    <!-- 查询 -->
    <el-form :inline="true" :model="formInline" class="demo-form-inline" style="display:contents;">
      <el-form-item>
        <el-input v-model="formInline.content" placeholder="评论内容"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit" plain>查询</el-button>
      </el-form-item>
    </el-form>
    <el-button @click="deleteSelected" type="primary" plain>删除选中项</el-button>
    <!-- 数据 --> <!-- 监听选择，选中后执行此方法 -->
    <el-table :data="tableData" v-loading="loading" style="width:65%" @selection-change="handleSelectionChange">
      <el-table-column prop="user.nickname" label="评论者" width="100">
      </el-table-column>
      <el-table-column prop="content" label="内容" width="200">
        <template slot-scope="scope">
          <div class="cell-content" style="max-height: 70px;overflow: auto;">{{ scope.row.content }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="time" label="时间" width="180" :formatter="formatDate">
      </el-table-column>

      <el-table-column label="操作" width="120">
        <!-- scope为当前行的数据 -->
        <template slot-scope="scope">
          &nbsp;
          <el-popconfirm @confirm="deleteComment(scope.row.id)" title="确定删除吗？">
            <el-button type="text" size="small" slot="reference">删除</el-button>
          </el-popconfirm>
          &nbsp;
          <el-button v-if="scope.row.root == 1" type="text" @click="updateComment(scope.row.id)" size="small"
            slot="reference">取消精选</el-button>
          <el-button v-else type="text" @click="updateComment(scope.row.id)" size="small"
            slot="reference">设为精选</el-button>
        </template>
      </el-table-column>
      <!-- 选择框，选中得到id -->
      <el-table-column type="selection"></el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <el-pagination @current-change="handlePageChange" :current-page="currentPage" :page-sizes="pageSizes"
      @size-change="handlePageSizeChange" :page-size="pageSize" :total="total"
      layout="total,prev, pager, next, jumper,slot,sizes"></el-pagination>
    <!-- 精选列表 -->
    <div style="position: fixed;float: right;top: 100px;right: 50px;height: 400px;overflow: auto;">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>
            <h3>精选列表</h3>
          </span>
        </div>
        <el-table :data="comments">
          <el-table-column prop="user.nickname" label="评论者" width="180">
          </el-table-column>
          <el-table-column prop="content" label="内容" width="180">
            <template slot-scope="scope">
              <div class="cell-content" style="max-height: 70px;overflow: auto;">{{ scope.row.content }}</div>
            </template>
          </el-table-column>
          <el-table-column>
            <template slot-scope="scope">
              <el-button type="text" @click="updateComment(scope.row.id)" size="small" slot="reference">取消精选</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>
  </div>
</template>
  
<script>
import commentApi from '@/api/commentApi';
import manageApi from '@/api/manageApi';
import dataApi from '@/api/dataApi';
export default {
  name: 'mesView',
  data() {
    return {
      tableData: [],  //表单数据
      formInline: {   //要提交到后端的表单
        content: '',  //查询的内容
      },
      comments: [],    //精选评论数组
      selectedItems: [],  //要删除的评论数组
      tableData: [], //存储从后端获取的数据
      currentPage: 1, // 当前页码
      pageSize: 10,   // 每页显示的数据量
      total: 0,        // 总数据量
      pageSizes: [10, 20, 30, 40], //分页
      loading: true,
    }
  },
  methods: {
    //获得数据
    getData() {
      this.loading = true;
      // 调用分页方法
      dataApi.commentData({
        //传入要查询的页数，和所要展示的页面条数
        params: {
          page: this.currentPage - 1,
          size: this.pageSize,
        }
      }).then(response => {
        //如果是使用了查询再分页的，继续使用旧的值
        if (response.totalElements !== this.total && this.total !== 0) {
          this.onSubmit();  //调用查询的分页方法
          this.loading = false
        } else {
          //否则执行正常流程，将结果赋值给表单
          this.tableData = response.content;
          this.total = response.totalElements;
          this.loading = false
        }
      })
      //获得所有精选评论
      manageApi.getCommentt({
        params: {
          page: 0,
          size: 100,
        }
      }).then(response => {
        this.comments = response.data.content;  //将查询到的结果赋值给精选评论数组
      })
    },
    //更换页数时执行
    handlePageChange(page) {
      this.currentPage = page;
      this.getData(); // 切换页码时重新获取数据
    },
    //更换页面条数时执行
    handlePageSizeChange(pagesize) {
      this.pageSize = pagesize;
      this.getData();
    },
    //自定义日期格式
    formatDate(row) {
      // 获取单元格数据
      let datac = row.time
      let dtc = new Date(datac)
      //获取月,默认月份从0开始
      let dtuMonth = dtc.getMonth() + 1
      //获取日
      let dtuDay = dtc.getDate()
      //处理1-9月前面加0
      if (dtuMonth < 10) {
        dtuMonth = "0" + (dtc.getMonth() + 1)
      }
      //处理1-9天前面加0
      if (dtuDay < 10) {
        dtuDay = "0" + dtc.getDate()
      }
      //获取小时
      let dtuHours = dtc.getHours()
      //处理1-9时前面加0
      if (dtuHours < 10) {
        dtuHours = "0" + dtc.getHours()
      }
      //获取分钟
      let dtuMinutes = dtc.getMinutes()
      //处理1-9分前面加0
      if (dtuMinutes < 10) {
        dtuMinutes = "0" + dtc.getMinutes()
      }
      //获取秒
      let dtuSeconds = dtc.getSeconds()
      //处理1-9秒前面加0
      if (dtuSeconds < 10) {
        dtuSeconds = "0" + dtc.getSeconds()
      }
      //组装年月日时分秒
      return dtc.getFullYear() + "/" + dtuMonth + "/" + dtuDay
        + " " + dtuHours + ":" + dtuMinutes + ":" + dtuSeconds
    },

    //模糊查询评论
    onSubmit() {
      this.loading = true
      manageApi.getComment1({   //发起请求，将查询内容及分页数据放在键值对传到后端
        content: this.formInline.content,  //查询的内容
        page: this.currentPage - 1,  //查询的页数
        size: this.pageSize,  //查询的条数
      }).then(response => {
        this.tableData = response.data.content;   //将结果赋给表单
        this.total = response.data.totalElements; //获得总条数
        this.loading = false
      })
    },
    updateComment(id) {   //设置评论为精选评论
      manageApi.updateComment({ id: id }).then(response => {  //将评论id作为键值对传到后端
        this.$message({
          message: '设置成功',
          type: 'success'
        });
        this.getData(); //设置后更新数据
      })
    },
    //删除评论
    deleteComment(id) {
      manageApi.deleteComment({ id: id }).then(response => { //将评论id作为键值对传到后端
        this.$message({
          message: '删除成功',
          type: 'success'
        });
        this.getData();
      })
    },
    //删除选中，将集合传入后台
    deleteSelected() {
      // 发送选中的项给后端进行批量删除
      manageApi.deleteComments(this.selectedItems).then(response => {
        if (response.data) {
          this.$message({
            message: '删除成功',
            type: 'success'
          });
          this.getData();
        } else {
          this.$message.error('删除失败');
        }
      })
    },
    //将选中的id赋值给一个集合
    handleSelectionChange(selection) {
      this.selectedItems = selection.map(comment => comment.id);
    }

  },

  mounted() {
    this.getData();

  },
}
</script>